<template>
  <div class="vip">
    <div class="header">
      <van-nav-bar title="健康VIP" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon
            name="https://z3.ax1x.com/2021/07/19/W8TpXq.png"
            size="18"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="top">
        <div class="img">
          <img src="https://z3.ax1x.com/2021/07/19/W8bgvd.png" alt="" />
        </div>
      </div>
      <p class="top2">会员额外专享福利</p>
      <img
        src="https://z3.ax1x.com/2021/07/19/W8z9Ts.png"
        alt=""
        class="img1"
      />
      <div class="text1">
        <span>会员专属权益</span><em>查看权益详细介绍 ></em>
      </div>
      <div class="consult">
        <div class="one sss">
          <p class="p1">号源提醒</p>
          <p class="p2">短信加APP双提醒，专家号不错过</p>
          <span>全年</span>
        </div>
        <div class="two sss">
          <p class="p1">图文咨询<span class="dazhe">8.8折</span></p>
          <p class="p2">不限次，不限医生</p>
          <span>全年</span>
        </div>
        <div class="three sss">
          <p class="p1">电话咨询<span class="dazhe">8.8折</span></p>
          <p class="p2">健康问题一个电话详细解决</p>
          <span>全年</span>
        </div>
        <div class="fore sss">
          <p class="p1">快速咨询<span class="dazhe">8.8折</span></p>
          <p class="p2">快速解答，专享折扣</p>
          <span>全年</span>
        </div>
        <div class="five sss">
          <p class="p1">贴心就诊<span class="dazhe">8.8折</span></p>
          <p class="p2">线下见医生，不排队享折扣</p>
          <span>全年</span>
        </div>
        <div class="six sss">
          <p class="p1">包月咨询<span class="dazhe">8.8折</span></p>
          <p class="p2">同享包月折扣</p>
          <span>全年</span>
        </div>
        <div class="seven">
          <p class="p1">专病管理服务<span class="dazhe">8.8折</span></p>
          <p class="p2">不限医生，不限服务，会员年卡，6次/年</p>
          <span>全年</span>
        </div>
      </div>
      <div class="hot">
        <p class="top">其他热门权益</p>
        <div class="list">
          <div class="middle aaa">
            <img src="https://z3.ax1x.com/2021/07/19/WGzBR0.png" alt="" />
            <span>专享活动</span>
            <p>定期福利，专属优惠 登录可领</p>
          </div>
          <div class="middle">
            <img src="https://z3.ax1x.com/2021/07/19/WGzgZ4.png" alt="" />
            <span>线上导医</span>
            <p>专属VIP标识，30秒 挂号就诊指导</p>
          </div>
          <div class="middle aaa">
            <img src="https://z3.ax1x.com/2021/07/19/WGzbee.png" alt="" />
            <span>专属客服</span>
            <p>会员主页可直通客 服，快速解答不等待</p>
          </div>
          <div class="middle fore">
            <img src="https://z3.ax1x.com/2021/07/19/WGzvWt.png" alt="" />
            <span>健康课堂</span>
            <p>开通直送240元课程</p>
          </div>
        </div>
        <p class="bottom">查看权益示例 ></p>
      </div>
      <div class="exclusive">
        <p class="one">会员专属权益</p>
        <div class="two">
          <div class="three">
            <p class="four1">会员您好！</p>
            <p class="four1">您的任何问题我们都随时待命</p>
            <p class="four2">周一到周五：8:00-19:00</p>
            <p class="four2">周末及节假日：9:00-17:30</p>
          </div>
          <img src="https://z3.ax1x.com/2021/07/19/WJ1y6K.png" alt="" />
        </div>
      </div>
      <div class="evaluate">
        <p>会员评价</p>
        <div class="show">
          <div class="name">
            <img src="https://z3.ax1x.com/2021/07/19/WJoew6.png" alt="" />
            <span>张女士</span>&nbsp;
            <p>使用微脉3年的用户</p>
          </div>
          <p class="say">
            我是金华人，看病呀，肯定要观察清楚放心才行。<br />
            所以我经常用微脉联系我的主治医师。<br />
            有时候上班没时间，觉得是个小问题，但是不放心<br />
            的时候也会问一下，看看医生怎么说，毕竟健康是<br />
            根本，不能小视的<br />
            现在的话，我添加了父母，老公，儿子，日常家里<br />
            的小问题基本都在微脉问问医生。<br />
            办会员肯定是划算的，生病了能不花钱看医生吗，<br />
            既然花钱肯定省一点最好了，而且时间有一年呢。<br />
          </p>
        </div>
      </div>
      <div class="record">开通记录</div>
      <div class="price">
        <div class="left">
          <em>￥</em><span>48</span><strong>/3个月</strong>
        </div>
        <div class="right">
          <em>￥</em><span>88</span><strong>/年&nbsp;开通立省</strong>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.push("/home/mine");
    };
    return {
      onClickLeft,
    };
  },
};
</script>
<style lang="less" scoped>
.vip {
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fbf1ef;
    z-index: 100;
    .van-nav-bar__content {
      background: #fbf1ef;
    }
    .van-nav-bar__title {
      font-size: 18px;
    }
  }

  .main {
    background: #fbf1ef;
    padding: 12px;
    margin-bottom: 50px;
    margin-top: 40px;
    .top {
      // width: 376px;
      height: 192px;
      .img {
        height: 100%;
        // width: 100%;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .top2 {
      line-height: 18px;
      color: #827466;
      font-size: 18px;
    }
    .img1 {
      width: 353px;
      height: 140px;
      margin-top: 10px;
    }
    .text1 {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      span {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #746e57;
        line-height: 18px;
      }
      em {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b38f5f;
        line-height: 18px;
      }
    }
    .consult {
      background: url(https://z3.ax1x.com/2021/07/19/WGCr5j.png);
      background-size: 100% 100%;
      width: 350px;
      height: 433px;
      padding: 88px 10px 0 10px;
      margin-top: 5px;
      margin-bottom: 10px;

      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .sss {
        width: 152px;
        height: 77px;
        background: #fdfdfd;
        border-radius: 8px;
        position: relative;
        .p1 {
          // width: 80px;
          height: 14px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 18px;
          margin-top: 12px;
          margin-left: 13px;
          .dazhe {
            position: absolute;
            top: 15px;
            left: 80px;
            width: 36px;
            height: 12px;
            line-height: 12px;
            font-weight: 500;
            font-size: 10px;
            background: linear-gradient(
              82deg,
              rgba(250, 228, 156, 0.96),
              rgba(255, 202, 122, 0.96)
            );
            border-radius: 7px;
          }
        }
        .p2 {
          height: 30px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 18px;
          margin-top: 12px;
          margin-left: 13px;
        }
        span {
          width: 38px;
          text-align: center;
          height: 14px;
          font-size: 11px;
          line-height: 15px;
          background: linear-gradient(
            82deg,
            rgba(255, 148, 98, 0.96),
            rgba(248, 116, 61, 0.96)
          );
          border-radius: 0 8px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .seven {
        width: 315px;
        height: 78px;
        background: #fdfdfd;
        border-radius: 8px;
        position: relative;
        .p1 {
          // width: 80px;
          height: 14px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 18px;
          margin-top: 12px;
          margin-left: 13px;
          .dazhe {
            position: absolute;
            top: 14px;
            left: 110px;
            width: 36px;
            height: 15px;
            font-weight: 500;
            font-size: 10px;
            line-height: 15px;
            background: linear-gradient(
              82deg,
              rgba(250, 228, 156, 0.96),
              rgba(255, 202, 122, 0.96)
            );
            border-radius: 7px;
          }
        }
        .p2 {
          // width: 107px;
          height: 30px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 18px;
          margin-top: 12px;
          margin-left: 13px;
        }
        span {
          width: 38px;
          text-align: center;
          height: 14px;
          font-size: 11px;
          background: linear-gradient(
            82deg,
            rgba(255, 148, 98, 0.96),
            rgba(248, 116, 61, 0.96)
          );
          border-radius: 0 8px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .hot {
      background: #fdfdfd;
      box-shadow: 0px 2px 4px 1px rgba(72, 81, 94, 0.09);
      border-radius: 8px;

      .top {
        border-radius: 8px 8px 0 0;
        font-size: 18px;
        height: 45px;
        color: #684a24;
        line-height: 45px;
        background: #f6d9ad;
        padding: 0 10px;
      }
      .list {
        height: 178px;
        .aaa {
          border-right: 1px solid #ddd;
        }

        .middle {
          display: inline-block;
          width: 50%;
          height: 80px;
          position: relative;
          border-bottom: 1px solid #ddd;
          padding-left: 10px;

          img {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 5px;
          }
          span {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 30px;
            margin-left: 45px;
          }
          p {
            width: 100px;
            height: 24px;
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 18px;
            margin-left: 45px;
          }
        }
        .fore {
          position: relative;
          top: -18px;
        }
      }
      .bottom {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #9e7839;
        line-height: 45px;
        height: 45px;
        text-align: center;
      }
    }
    .exclusive {
      margin-top: 40px;
      width: 100%;
      .one {
        width: 214px;
        height: 34px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #746e57;
        line-height: 36px;
      }
      .two {
        margin-top: 10px;
        background: #fdfffe;
        border-radius: 15px;
        padding: 12px;
        .three {
          width: 250px;
          display: inline-block;
          .four1 {
            width: 289px;
            height: 29px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 36px;
          }
          .four2 {
            height: 26px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 36px;
          }
        }
        img {
          width: 40px;
          height: 40px;
          margin: 0 0 50px 35px;
        }
      }
    }
    .evaluate {
      margin-top: 30px;
      p {
        width: 142px;
        height: 34px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #746e57;
        line-height: 36px;
      }
      .show {
        width: 100%;
        height: 450px;
        background: #ffffff;
        border-radius: 10px;
        padding: 10px;
        .name {
          line-height: 20px;
          img {
            width: 40px;
            height: 40px;
          }
          span {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 36px;
            position: relative;
            top: -10px;
          }
          p {
            display: inline-block;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 36px;
            position: relative;
            top: -12px;
          }
        }
        .say {
          width: 100%;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 36px;
        }
      }
    }
    .record {
      background: #ffffff;
      border-radius: 10px;
      width: 100%;
      height: 50px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #81796e;
      line-height: 50px;
      margin-top: 20px;
      text-align: center;
    }
    .price {
      margin-top: 15px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 20px;
      .left {
        width: 130px;
        height: 45px;
        border: 2px solid #aa9962;
        border-radius: 20px;
        text-align: center;
        em {
          font-weight: 500;
          font-size: 16px;
          color: #81651b;
          line-height: 45px;
        }
        span {
          line-height: 45px;
          font-size: 24px;
        }
        strong {
          line-height: 45px;
          font-weight: 500;
          font-size: 15px;
        }
      }
      .right {
        width: 200px;
        height: 45px;
        background: linear-gradient(
          82deg,
          rgba(254, 114, 54, 0.94),
          rgba(243, 79, 26, 0.94)
        );
        border-radius: 20px;
        font-weight: 500;
        text-align: center;
        em {
          font-weight: 500;
          font-size: 16px;
          color: #81651b;
          line-height: 45px;
          color: #fff;
        }
        span {
          line-height: 45px;
          color: #fff;
          font-size: 24px;
        }
        strong {
          line-height: 45px;
          font-weight: 500;
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
}
</style>
